<app-back-btn></app-back-btn>
<div class="page-title">
  <span class="title" *ngIf="!this.code">{{'Supplier0003'| translate}}</span>
  <span class="title" *ngIf="this.code">{{'Supplier0048'| translate}}</span>
</div>

<div class="panel panel-body">
  <form nz-form [formGroup]="validateForm" class="form-wrap" (submit)="addSupplier($event)">
    <h2 class="subtitle">{{'Supplier0004'| translate}}</h2>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="name" nzRequired>{{'Supplier0006'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('name')">
        <input nz-input formControlName="name" type="text" id="name" placeholder="{{'Supplier0006'| translate}}">
        <nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').errors">
          <ng-container *ngIf="getFormControl('name').hasError('required')">{{'Supplier0007'| translate}}</ng-container>
          <ng-container *ngIf="getFormControl('name').hasError('maxlength')">{{'Supplier0008'| translate}}
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
      <nz-form-control [nzSm]="7" class="font12 pl color-gray">
        {{'Supplier0009'| translate}}
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="englishName" nzRequired>{{'Supplier0010'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('englishName')">
        <input nz-input formControlName="englishName" type="text" id="englishName"
               placeholder="{{'Supplier0010'| translate}}">
        <nz-form-explain *ngIf="getFormControl('englishName').dirty&&getFormControl('englishName').errors">
          <ng-container *ngIf="getFormControl('englishName').hasError('required')">{{'Supplier0011'| translate}}
          </ng-container>
          <ng-container *ngIf="getFormControl('englishName').hasError('maxlength')">{{'Supplier0008'| translate}}
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
      <nz-form-control [nzSm]="7" class="font12 pl color-gray">
        {{'Supplier0012'| translate}}
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="supplierCategoryCode" nzRequired>{{'Supplier0013'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('supplierCategoryCode')">
        <nz-select formControlName="supplierCategoryCode" nzAllowClear nzPlaceHolder="Choose">
          <nz-option *ngFor="let item of supplierCategorys" [nzValue]="item.code" [nzLabel]="item.name"></nz-option>
        </nz-select>
        <nz-form-explain
          *ngIf="getFormControl('supplierCategoryCode').dirty&&getFormControl('supplierCategoryCode').hasError('required')">
          {{'Supplier0014'| translate}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="companyNature" nzRequired>{{'Supplier0015'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('companyNature')">
        <nz-select formControlName="companyNature" nzAllowClear nzPlaceHolder="{{'Supplier0005'| translate}}">
          <nz-option *ngFor="let item of companyNature" [nzValue]="item.key" [nzLabel]="item.val"></nz-option>
        </nz-select>
        <nz-form-explain
          *ngIf="getFormControl('companyNature').dirty&&getFormControl('companyNature').hasError('required')">
          {{'Supplier0016'| translate}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="contacts" nzRequired>{{'Supplier0017'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('contacts')">
        <input nz-input formControlName="contacts" type="text" id="contacts"
               placeholder="{{'Supplier0017'| translate}}">
        <nz-form-explain
          *ngIf="getFormControl('contacts').dirty&&getFormControl('contacts').hasError('required')">
          {{'Supplier0018'| translate}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="mobile" nzRequired>{{'Supplier0019'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('mobile')">
        <input nz-input formControlName="mobile" type="text" id="mobile" placeholder="{{'Supplier0019'| translate}}">
        <nz-form-explain *ngIf="getFormControl('mobile').dirty&&getFormControl('mobile').errors">
          <ng-container *ngIf="getFormControl('mobile').hasError('required')">{{'Supplier0020'| translate}}
          </ng-container>
          <ng-container *ngIf="getFormControl('mobile').hasError('pattern')">{{'Supplier0021'| translate}}
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="address" nzRequired>{{'Supplier0022'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('address')">
        <input nz-input formControlName="address" type="text" id="address" placeholder="{{'Supplier0022'| translate}}">
        <nz-form-explain *ngIf="getFormControl('address').dirty&&getFormControl('address').errors">
          <ng-container *ngIf="getFormControl('address').hasError('required')">{{'Supplier0023'| translate}}
          </ng-container>
          <ng-container *ngIf="getFormControl('englishAddress').hasError('maxlength')">{{'Supplier0024'| translate}}
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
      <nz-form-control [nzSm]="7" class="font12 pl color-gray">
        {{'Supplier0009'| translate}}
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="bank" nzRequired>{{'Supplier0025'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('bank')">
        <input nz-input formControlName="bank" type="text" id="bank" placeholder="{{'Supplier0025'| translate}}">
        <nz-form-explain
          *ngIf="getFormControl('bank').dirty&&getFormControl('bank').hasError('required')">
          {{'Supplier0026'| translate}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="bankAccount" nzRequired>{{'Supplier0027'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('bankAccount')">
        <input nz-input formControlName="bankAccount" type="text" id="bankAccount"
               placeholder="{{'Supplier0027'| translate}}">
        <nz-form-explain *ngIf="getFormControl('bankAccount').dirty&&getFormControl('bankAccount').errors">
          <ng-container *ngIf="getFormControl('bankAccount').hasError('required')">{{'Supplier0028'| translate}}
          </ng-container>
          <ng-container *ngIf="getFormControl('bankAccount').hasError('pattern')">{{'Supplier0029'| translate}}
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="paymentTerm" nzRequired>{{'Supplier0030'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('paymentTerm')">
        <nz-select formControlName="paymentTerm" nzAllowClear nzPlaceHolder="{{'Supplier0005'| translate}}">
          <nz-option *ngFor="let item of paymentList" [nzValue]="item.code" [nzLabel]="item.payment"></nz-option>
        </nz-select>
        <nz-form-explain
          *ngIf="getFormControl('paymentTerm').dirty&&getFormControl('paymentTerm').hasError('required')">
          {{'Supplier0031'| translate}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <h2 class="subtitle">{{'Supplier0032'| translate}}</h2>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="telephone">{{'Supplier0033'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('telephone')">
        <input nz-input formControlName="telephone" type="text" id="telephone"
               placeholder="{{'Supplier0033'| translate}}">
        <nz-form-explain *ngIf="getFormControl('telephone').dirty&&getFormControl('telephone').errors">
          <ng-container *ngIf="getFormControl('telephone').hasError('pattern')">{{'Supplier0034'| translate}}
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="website">{{'Supplier0035'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('website')">
        <input nz-input formControlName="website" type="text" id="website" placeholder="{{'Supplier0035'| translate}}">
        <nz-form-explain *ngIf="getFormControl('website').dirty&&getFormControl('website').errors">
          <ng-container *ngIf="getFormControl('website').hasError('pattern')">{{'Supplier0036'| translate}}
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="creditRating">{{'Supplier0037'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('creditRating')">
        <nz-rate formControlName="creditRating" [nzCount]="5"></nz-rate>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="englishAddress">{{'Supplier0038'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('englishAddress')">
        <input nz-input formControlName="englishAddress" type="text" id="englishAddress"
               placeholder="{{'Supplier0038'| translate}}">
        <nz-form-explain *ngIf="getFormControl('englishAddress').dirty&&getFormControl('englishAddress').errors">
          <ng-container *ngIf="getFormControl('englishAddress').hasError('maxlength')">{{'Supplier0039'| translate}}
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
      <nz-form-control [nzSm]="7" class="font12 pl color-gray">
        {{'Supplier0040'| translate}}
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="email">{{'Supplier0041'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('email')">
        <input nz-input formControlName="email" type="text" id="email" placeholder="{{'Supplier0041'| translate}}">
        <nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').errors">
          <ng-container *ngIf="getFormControl('email').hasError('email')">{{'Supplier0042'| translate}}</ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="fax">{{'Supplier0043'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('fax')">
        <input nz-input formControlName="fax" type="text" id="fax" placeholder="{{'Supplier0043'| translate}}">
        <nz-form-explain *ngIf="getFormControl('fax').dirty&&getFormControl('fax').errors">
          <ng-container *ngIf="getFormControl('fax').hasError('pattern')">{{'Supplier0044'| translate}}</ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="zipCode">{{'Supplier0045'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('zipCode')">
        <input nz-input formControlName="zipCode" type="text" id="zipCode" placeholder="{{'Supplier0045'| translate}}">
        <nz-form-explain *ngIf="getFormControl('zipCode').dirty&&getFormControl('zipCode').errors">
          <ng-container *ngIf="getFormControl('zipCode').hasError('pattern')">{{'Supplier0046'| translate}}
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="7" nzFor="summary">{{'Supplier0047'| translate}}</nz-form-label>
      <nz-form-control [nzSm]="10" [nzValidateStatus]="getFormControl('summary')">
        <textarea row="4" nz-input formControlName="summary" type="text" id="summary"
                  placeholder="{{'Supplier0047'| translate}}"></textarea>
      </nz-form-control>
    </nz-form-item>

    <!--表单底部start-->
    <nz-form-item class="action-button">
      <nz-form-control class="text-center">
        <button nz-button nzSize="large" [nzType]="'primary'" class="pl-30 pr-30" [nzLoading]="isConfirmLoading">
          {{'Btn0009'| translate}}
        </button>
      </nz-form-control>
    </nz-form-item>
    <!--表单底部end-->
  </form>

</div>
